<!-- 检查及隐患图表组件 -->
<template>
  <div class="wrap-charts-info">
    <p class="wrap-info-title">检查及隐患</p>
    <div class="wrap-line-chart" id="dangerLineChart"></div>
    <div class="wrap-pie-chart" id="dangerPieChart"></div>
  </div>
</template>

<script>
  import axiosModel from '@/api'
  export default {
    data () {
      return {}
    },
    components: {},
    computed: {},
    created () {},
    mounted () {
      this.getDashboardCheck()
    },
    methods: {
      async getDashboardCheck () {
        const { data } = await axiosModel.buildingQueryController.getDashboardCheck()
        const { rectifiedQuantity, notRectifiedQuantity, hTroubleStatistics } = data.rows.dataList
        this.initLineChart(hTroubleStatistics)
        this.initPieChart(rectifiedQuantity, notRectifiedQuantity)
      },
      initLineChart (data) {
        let option = {
          grid: {
            top: '34%',
            bottom: '12%' //也可设置left和right设置距离来控制图表的大小
          },
          tooltip: {
            trigger: 'item',
            formatter: (param) => {
              return param.seriesName + '<br />' + param.name + '：' + param.value + (param.seriesName === '隐患整改率' ? '%' : '')
            }
          },
          legend: {
            data: ['隐患整改率', '隐患数'],
            top: '0%',
            right: '0',
            itemWidth: 12,
            itemHeight: 8,
            textStyle: {
              color: '#ffffff'
            },
            color: ['rgba(255,123,0,1)', 'rgba(29,225,254,1)']
          },
          xAxis: {
            name: '(月)',
            nameTextStyle: {
              color: '#fff',
              fontSize: 12,
              align: 'right',
              padding: [35, 0, 5, 0]
            },
            // data: ['3', '4', '5', '6', '7', '8', '9', '10'],
            data: data ? data.xAxis : [],
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: true //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              interval:0,
              textStyle: {
                color: '#fff' //X轴文字颜色
              }
            }
          },
          yAxis: [
            {
              type: 'value',
              name: '数量（个）',
              nameTextStyle: {
                color: '#fff',
                padding: [0, 0, 0, 20]
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#FFFFFF'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            {
              type: 'value',
              name: '百分比（%）',
              nameTextStyle: {
                color: '#fff',
                padding: [0, 5, 0, 0]
              },
              position: 'right',
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#FFFFFF'
                }
              },
              axisLabel: {
                show: true,
                // formatter: '{value} %', //右侧Y轴文字显示
                textStyle: {
                  color: '#fff'
                }
              }
            }
          ],
          series: [
            {
              name: '隐患整改率',
              type: 'line',
              yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
              smooth: true, //平滑曲线显示
              showAllSymbol: true, //显示所有图形。
              symbol: 'emptyCircle', //标记的图形为实心圆
              symbolSize: 6, //标记的大小
              itemStyle: {
                //折线拐点标志的样式
                color: '#FF8F00',
                borderColor: '#FF8F00',
                borderWidth: 2
              },
              lineStyle: {
                color: 'transparent'
              },
              areaStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: 'rgba(255,123,0,0)'
                  },
                  {
                    offset: 0,
                    color: 'rgba(255,123,0, 1)'
                  }
                ])
                // color: 'rgba(255,123,0,0.4)'
              },
              z: 5,
              data: data ? data.zglData : []
            },
            {
              name: '隐患数',
              type: 'bar',
              barWidth: 8,
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: 'rgba(29,225,254,0.16)'
                    },
                    {
                      offset: 0,
                      color: 'rgba(29,225,254,1)'
                    }
                  ])
                }
              },
              data: data ? data.problemData : []
            }
          ]
        }
        let charts
        if (document.getElementById('dangerLineChart')) {
          charts = this.$echarts.init(document.getElementById('dangerLineChart'))
          charts.setOption(option)
        }
        window.addEventListener('resize', () => {
          if (charts) {
            charts.resize()
          }
        })
      },
      initPieChart (rectifiedQuantity, notRectifiedQuantity) {
        let trafficWay = [
          {
            name: '未整改',
            value: notRectifiedQuantity || 0
          },
          {
            name: '已整改',
            value: rectifiedQuantity || 0
          }
        ]
        if (!rectifiedQuantity && !rectifiedQuantity) {
          trafficWay = [
            {
              name: '未整改',
              value: notRectifiedQuantity || 5
            },
            {
              name: '已整改',
              value: rectifiedQuantity || 12
            }
          ]
        }
        let rich = {
          orange: {
            color: '#7FDFF7',
            align: 'center',
            fontSize: 26,
            padding: [3, 0]
          },
          green: {
            color: '#FF8F00',
            aline: 'center',
            fontSize: 26,
            padding: [3, 0]
          },
          white: {
            color: '#fff',
            align: 'center',
            fontSize: 14
          }
        }
        let data = []
        let data1 = []
        let color = ['#FF8F00', 'rgba(255,255,255,0.5)']
        let color1 = ['rgba(255,255,255,0.5)', '#7FDFF7']
        for (let i = 0; i < trafficWay.length; i++) {
          data.push(
            {
              value: trafficWay[i].value,
              name: trafficWay[i].name,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  shadowBlur: 0,
                  color: color[i]
                }
              }
            },
            {
              value: 0.5,
              name: '',
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                  color: 'rgba(0, 0, 0, 0)',
                  borderColor: 'rgba(0, 0, 0, 0)',
                  borderWidth: 0
                }
              }
            }
          )
          data1.push(
            {
              value: trafficWay[i].value,
              name: trafficWay[i].name,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  shadowBlur: 0,
                  color: color1[i]
                }
              }
            },
            {
              value: 0.5,
              name: '',
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                  color: 'rgba(0, 0, 0, 0)',
                  borderColor: 'rgba(0, 0, 0, 0)',
                  borderWidth: 0
                }
              }
            }
          )
        }
        let seriesOption = [
          {
            name: '已整改',
            type: 'pie',
            clockWise: true,
            center: window.innerHeight < 850 ? ['26%', '50%'] : ['26%', '40%'],
            radius: window.innerHeight < 850 ? [36, 41] : [44, 49],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'center',
                  rich: rich,
                  formatter: function () {
                    return '{orange|' + (rectifiedQuantity || 0) + '}' + '\n{white|' + trafficWay[1].name + '}'
                  }
                }
              }
            },
            data: data1
          },
          {
            name: '未整改',
            type: 'pie',
            clockWise: true,
            center: window.innerHeight < 850 ? ['78%', '50%'] : ['78%', '40%'],
            radius: window.innerHeight < 850 ? [36, 41] : [44, 49],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'center',
                  rich: rich,
                  formatter: function () {
                    return '{green|' + (notRectifiedQuantity || 0) + '}' + '\n{white|' + trafficWay[0].name + '}'
                  }
                }
              }
            },
            data: data
          }
        ]
        let option = {
          tooltip: {
            show: false
          },
          toolbox: {
            show: false
          },
          series: seriesOption
        }
        let charts
        if (document.getElementById('dangerPieChart')) {
          charts = this.$echarts.init(document.getElementById('dangerPieChart'))
          charts.setOption(option)
        }
        window.addEventListener('resize', () => {
          if (charts) {
            charts.resize()
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .wrap-charts-info {
    z-index: 4;
    height: 47%;
    position: relative;
    .wrap-info-title {
      font-size: 22px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 60px;
    }
    .wrap-line-chart {
      height: 50%;
      width: 100%;
    }
    .wrap-pie-chart {
      height: 50%;
      width: 100%;
    }
  }
  @media screen and (max-height: 860px) {
    .wrap-info-title {
      font-size: 18px !important;
      line-height: 2 !important;
    }
    .wrap-line-chart {
      height: 55% !important;
    }
    .wrap-pie-chart {
      height: 45% !important;
    }
  }
</style>
